<template>
    <div class="morelist">
      <div class="filter-top" @click="showFilter = true"> 
        请选择筛选条件 <div class="isclick"> </div> 
      </div>
      <div class="data-list"> 
        <div class="data-header">
          <div class="data-header-title">统计日期</div>
          <div class="data-header-title">赠券券数</div>
          <div class="data-header-title">赠券金额</div>
        </div>
        <div>
          <div class="data-row" v-for="(item,index) in list" :key="index" :style="{ 'background': index % 2 == 0 ? '#fff' : '#f5f5f5'}" @click="showZGDialog(index)">
            <div class="data-row-item">{{item.tjDate}} </div>
            <div class="data-row-item">{{item.amount}} </div>
            <div class="data-row-item">{{item.money/100}} 元</div>
          </div> 
        </div>
        <div class="view-more isbtn" @click="getMore" v-if="currTotalRow <= totalPage">
          <span>加载更多</span>  <div class="isclick"></div>
        </div>
        <div class="view-more isbtn" v-else>
          <span>没有更多内容啦~</span>  
        </div>
      </div>
      <!--  下拉筛选 -->
      <top-filter :showFilter.sync="showFilter">
        <div class="filter-content" @click.stop>
          <div class="filter-title">时间段</div>
          <div class="data-time-box">
            <div class="row-box">
              <group>
                <datetime v-model="starTime" :end-date="defult_endTime"></datetime>
              </group> 
            </div>
            <div>至</div>
            <div class="row-box">
              <group>
                <datetime v-model="endTime" :end-date="defult_endTime"></datetime>
              </group> 
            </div>
          </div>
  
          <div class="" v-if="isExistShop==false">渠道</div>
          <div class="row-box" v-if="isExistShop==false">
            <group>
              <popup-picker v-model="shop" show-name :data="shopList"
               @on-shadow-change="nextShop" placeholder="请选择渠道"></popup-picker>
            </group> 
          </div>
          <div class="btn-box">
            <div class="reset btn" @click="reset">重置</div>
            <div class="confirm btn" @click="confirmSelect">确认</div>
          </div>
        </div>
      </top-filter> 
   
      <x-dialog :show.sync="zg_show" class="dialog"  hide-on-blur>
        <div class="dialog-content">
          <row title="统计日期" :value="list[viewIndex] && list[viewIndex].tjDate"></row> 
          <row title="赠券人数" :value="list[viewIndex]&&list[viewIndex].pepoles + ''"></row> 
          <row title="赠券券数" :value="list[viewIndex]&&list[viewIndex].amount + ''"></row>  
          <row title="赠券金额" :value="list[viewIndex]&&list[viewIndex].money/100 + '元'"></row>
          
        </div>
      </x-dialog>
  
    </div> 
  </template>
  
  <script> 
  import { Search } from 'vux'
  import api from '@/api/api.js' 
  import row from '@/components/row' 
  import topFilter from '@/components/topFilter'
  import { Datetime, Group, PopupPicker,XDialog } from 'vux'
  import util from '@/utils/util.js'
  export default {
    name: 'more',
    components: {
      Search,
      topFilter,
      XDialog,
      Datetime, 
      row,
      Group, 
      PopupPicker, 
    },
    data () {
      return { 
        isExistShop:false,
        
        starTime:'',
        endTime: '',
        dialogShow:false,
        orderType:0,
        zg_show:false,
        viewIndex:0,
        list:[{}],
        showIndex:false,
        searchText:'',
        showFilter: false,
        defult_endTime:'',
        totalPage:0,
        currTotalRow:0,
        type:0,
        "pageSize": 20,
        "pageNum": 1, 
        shop:[],
        shopList:[],
        shopList_res:[],
        shopPage:{
              totalPage:0,
              pageSize:20,
              pageNum:1,
              currTotalRow:0,
           },
        
      }
    },
    created (){
      this.getAmouthDay();
    }, 
    mounted () {  
      if(this.$route.query.startTime){
        this.type = 1;
      }
      if(this.$route.query.id){
        this.shop = [this.$route.query.id];
        this.isExistShop=true;
      }
      this.getShopList()
  
      this.getData(this.$route.query);
  
    },
    methods: {
      // 筛选默认最近一个月
      getAmouthDay(){ 
        let today= new Date();
        let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
        this.starTime = util.timeTampt(mounth_ago);
        this.endTime= util.timeTampt(today); 
        this.defult_endTime = util.timeTampt(today); 
      },
      nextShop(ids){
        var lens = this.shopList_res.length;
        if (lens>2){
            var maxId1 = this.shopList_res[lens-1].channelId;
            var maxId2 = this.shopList_res[lens-2].channelId;
            var maxId3 = this.shopList_res[lens-3].channelId;
            //console.info("----------maxId="+maxId)
            if (ids == maxId1 || ids == maxId2 || ids == maxId3){
              console.info("--------------请求下一页")
              if (this.shopPage.currTotalRow<this.shopPage.totalPage){
                this.shopPage.pageNum++;
                this.getShopList();
              }
            }
        }
      },
      getShopList(){
        let data = {
          pageNum: this.shopPage.pageNum,
          pageSize: this.shopPage.pageSize,
        } 
        api.shopMng.shopList(data,res=>{ 
              console.info("--------------请求下一页")
          if (data.pageNum==1){
            this.shopList_res=res.result.data;
          }else{
            this.shopList_res=this.shopList_res.concat(res.result.data);
          }
          console.info(this.shopList_res)
          const ary = this.shopList_res.map(item=>{
              return {
                  name: item.channelName,
                  value: item.channelId
              }
          });
          this.shopList = [ary]
          console.info(this.shopList)
          this.shopPage.totalPage = res.result.totalPage;
          
          this.shopPage.currTotalRow= data.pageNum * data.pageSize;
        })
      },
      
      confirmSelect(){
        this.pageNum = 1;
        this.type = 0 ;
        this.getData();
      },
      showDialog(index){
        this.viewIndex = index;
        this.dialogShow = true;
      },
      showZGDialog(index){
        this.viewIndex = index;
        this.zg_show = true;
      },
      //重置筛选
      reset(){
        this.searchText = '';
        this.getAmouthDay();
      },
      filterShow(){
        this.showFilter = !this.showFilter
      },
      showChilderGoods(idx1,idx2){
        let bool = !this.list[idx1].goodsList[idx2].hidden;
        this.$set(this.list[idx1].goodsList[idx2],"hidden",bool);
      },
      changeOrderType(){
  
        if(this.orderType>=2){
          this.orderType=0;
        }else{
           ++this.orderType;
        } 
       
        this.pageNum = 1;
        this.getData();
      },
      getMore(){
        this.getData();
      },
      resultClick(e){
        console.log(e)
      },
  
      getData(params){
        params = params || {};
        let defult = {
          "pageSize": this.pageSize,
          "pageNum": this.pageNum,
          "storeId":this.$route.query.id
        }
        if(this.type){ 
            params.startTime = this.$route.query.startTime || this.starTime; 
            params.endTime = this.$route.query.endTime || this.endTime;
        }else{
           if(this.starTime){
            params.startTime = this.starTime;
          }
          if(this.endTime){
            params.endTime = this.endTime;
          }
        }
        if(this.shop[0]){
          params.queryChannelId = this.shop[0];
        }
        
        params = Object.assign(defult,params); 
        return api.data.couponReportDayList(params,res=>{
          this.showFilter=false;
          this.list = params.pageNum==1 ? res.result.data : this.list.concat(res.result.data); 
          this.currTotalRow = params.pageNum * params.pageSize;
          ++this.pageNum; 
          this.totalPage = res.result.totalPage;
        })
        
      
      },
      
      onSubmit(e){
        console.log(e)
      }
    }
  }
  </script>
   
  <style lang="less" scoped> 
  .goods-title{
    padding: .20rem .32rem;
    font-weight: bold;
    text-align: left;
  }
  .change-box{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .iconqiehuan{
    margin-left: .08rem;
  }
  .flex_lay{
    display: flex;
    align-items: center;
  }
  .morelist{
    padding-top: 44px;
  }
  .dialog-content{
    background: #fff;
    border-radius: 8px;
    min-height: 170px;
  }
  .grayfont{
    color: #666;
  }
  .redfont{
    color: red;
  }
  /deep/.weui-dialog{
    max-width: 100%;
    width: 85%;
  }
  /deep/.weui-search-bar__label{
    top: 3px;
  }
  .goods-row-item{
    justify-content: space-between;
    height: .88rem; 
    padding: 0 .20rem;
  }
  .gray-bg{
    background: #f5f5f5;
  }
  .filter-content{
    background: #fff;
    width: 100%;
    padding: 20px;
    /deep/.weui-search-bar:before{
      height: 0;
    }
    /deep/.weui-search-bar::after{
      height: 0;
    }
    .row-box{
      margin-bottom: 20px;
    }
    .filter-title{
      padding-top: 20px;
  
    }
    .data-time-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  /deep/.vux-popup-picker-select{
    text-align: left !important;
  }
  /deep/.weui-search-bar,.vux-search-fixed{
    position: relative !important;
    padding: 0;
    background: #fff;
  }
  /deep/.weui-search-bar__cancel-btn{
    text-decoration: none;
  }
  /deep/.weui-search-bar:after{
    display: none;
  }
  /deep/.weui-search-bar::before{
    display: none;
  }
  .btn-box{
    display: flex;
    width: 100%;
    margin-top: 20px;
    height: 44px;
    justify-content: space-between; 
    .btn{
      border-radius: 8px;
      height: 44px;
      width: 45%;
      line-height: 44px;
      text-align: center;
      color: #fff;
      &:active{
        opacity: .7;
      }
      &.reset{
        background: #ddd;
      }
      &.confirm{
        background: #FABE00;
      }
    }
  }
  .iconshaixuan{
    position: absolute;
    right: .20rem;
    top: .28rem;
  }
  .filter-top{
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 3;
    .isclick{
      border-width: 0 1px 1px 0;
      margin-top: -6px;
    }
  }
  .data-list{
      padding-top: 48px;
    .data-header{
      height: 48px;
      line-height: 48px;
      font-weight: bold;
      background: #ddd;
      display: flex;
      position: fixed;
      top: 44px;
      left: 0;
      width: 100%;
      .data-header-title{
        flex: 1;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .data-row{
      height: 48px;
      line-height: 48px;
      display: flex;
      &-item{
        flex: 1;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .view-more{
    color: #999;
    display: flex;
    align-items: center;
    height: 44px;
    justify-content: center; 
    .isclick{
      // border-width: 0 1px 1px 0;
      // margin-top: -6px;
    }
  }
  </style>
  